<template>
  <el-card>
    <div>
      <h1>个人信息填写</h1>
      <el-form ref="form" :model="form" :rules="formRules" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="专业">
          <el-input v-model="form.major" placeholder="例：人工智能"></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-input v-model="form.class" placeholder="例：20214"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="学号">
          <el-input
            v-model="form.account"
            oninput="value=value.replace(/[^\d]/g,'')"
          ></el-input>
        </el-form-item>
        <el-form-item
          ><p @click="tojirshao" :model="message">{{ this.message }}</p>
          <el-button type="primary" @click="onSubmit">{{ btnname }}</el-button>
          <!-- <el-button>修改</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    // 验证邮箱的规则
    var checkEmail = (rule, value, cb) => {
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
      if (regEmail.test(value)) {
        // 合法邮箱
        return cb();
      }

      cb(new Error("请输入合法的邮箱"));
    };
    return {
      form: {
        username: "",
        major: "",
        class: "",
        email: "",
        account: "",
      },
      formRules: {
        username: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 4, message: "请输入2~4位汉字", trigger: "blur" },
        ],
        major: [{ required: true, message: "请输入专业", trigger: "blur" }],
        class: [{ required: true, message: "请输入班级", trigger: "blur" }],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { validator: checkEmail, trigger: "blur" },
        ],
        account: [
          { required: true, message: "请输入学号", trigger: "blur" },
          { min: 11, max: 11, message: "学号应为11位", trigger: "blur" },
        ],
      },
      message: "",
      btnname: "提交",
      popo: 0,
    };
  },
  created() {
    this.showmessage();
  },
  methods: {
    tojirshao() {
      this.$router.push("/introduce");
    },
    async showmessage() {
      let token = localStorage.getItem("token"); //取token
      let account = localStorage.getItem("account"); //取token

      this.message = "报名请前往实验室介绍>>";
      this.form.account = account;
      const { data: res } = await this.$http.post(
        "http://www.xxr120.xyz:8000/api/product1/show",
        {
          username: this.form.username,
          major: this.form.major,
          class: this.form.class,
          email: this.form.email,
          account: account,
          token: token,
        }
      );
      if (!res.data.length) {
        this.btnname = "提交";

        this.form.account = account;
      } else {
        this.popo = 1;

        this.btnname = "修改";

        this.form = res.data[0];
        this.form.account = account;
      }
    },
    async onSubmit() {
      var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
      if (
        !reg.test(this.form.username) ||
        this.form.username.length < 2 ||
        this.form.username.length > 4
      ) {
        this.$message.error("姓名请输入正确位数汉字");
        return;
      }
      if (!reg.test(this.form.major)||this.form.major.length<2) {
        this.$message.error("专业请输入正确位数汉字");
        return;
      }
       if(this.form.account.length!=11){
        this.$message.error("请填写正确学号");
        return;
      }
      let token = localStorage.getItem("token"); //取token
      let account = localStorage.getItem("account"); //取token

      if (
        !this.form.username ||
        !this.form.major ||
        !this.form.class ||
        !this.form.email
      ) {
        this.$message.error("请将信息填写完整！");
        return false;
      }
      if (!this.popo) {
        const { data: res } = await this.$http.post(
          "http://www.xxr120.xyz:8000/api/product1/insertAccount",
          {
            username: this.form.username,
            major: this.form.major,
            class: this.form.class,
            email: this.form.email,
            account: account,
            token: token,
          }
        );

        if (res.code == 200) {
          this.$message.success(res.msg);
          localStorage.setItem("selfmsg", 1);
          this.showmessage();
        } else {
          localStorage.setItem("selfmsg", 0);
          this.$message.error(res.msg);
        }
      } else {
        const ConfirmResult = await this.$confirm(
          "此操作将改变你的个人信息, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            center: true,
          }
        ).catch((err) => err);
        if (ConfirmResult !== "confirm") {
          return this.$message.info("已取消修改");
        }
        const { data: res } = await this.$http.post(
          "http://www.xxr120.xyz:8000/api/product1/updateData",
          {
            username: this.form.username,
            major: this.form.major,
            class: this.form.class,
            email: this.form.email,
            account: account,
            token: token,
          }
        );

        if (res.code == 200) {
          localStorage.setItem("selfmsg", 1);
          this.$message.success(res.msg);
          this.showmessage();
        } else {
          this.$message.error("信息未改变");
        }
      }
    },
  },
};
</script>

<style scoped>
.el-input {
  margin-left: 10%;
  width: 80%;
}
p {
  color: rgb(114, 114, 200);
  margin-left: -5%;
}
.el-button {
  float: right;

  margin-right: 10%;
}
@media screen and (min-width: 900px) {
  .el-form-item {
    margin-left: 10%;
    width: 70%;
  }
}
</style>
